<template>
  <div>
    <Breadcrumb style="padding-bottom: 20px">
      <BreadcrumbItem to="/">图书管理后台</BreadcrumbItem>
      <BreadcrumbItem>历史信息</BreadcrumbItem>
    </Breadcrumb>

    <div class="demo-search">
      <Form ref="queryForm" :model="queryForm" inline>
        <FormItem prop="name">
          <Input type="text" v-model="queryForm.name" placeholder="书名">
            <template #prepend>
              <Icon type="ios-person-outline"></Icon>
            </template>
          </Input>
        </FormItem>

        <FormItem>
          <Button type="primary" @click="handleQuery('queryForm')">查询</Button>
        </FormItem>
      </Form>
    </div>

    <Table border :columns="columns" :data="data"></Table>

    <Page
      :total="total"
      :page-size="size"
      @on-change="changePage"
      :model-value="page"
      show-elevator
      style="padding-top: 20px"
    />

    <GlobalFooter :links="links" :copyright="copyright" />
  </div>
</template>
<script>
import { resolveComponent } from 'vue';
import { queryHistoryPage } from '@/api/historyApi';
export default {
  data() {
    return {
      size: 5,
      page: 1,
      total: 0,
      columns: [
        {
          title: 'ID',
          key: 'id',
          align: 'center'
        },
        {
          title: '书号',
          key: 'bookId',
          align: 'center'
        },
        {
          title: '用户号',
          key: 'personalId',
          align: 'center'
        },
        {
          title: '书名',
          key: 'bookName',
          align: 'center'
        },
        {
          title: '作者',
          key: 'bookAuthor',
          align: 'center'
        },
        {
          title: '价格',
          key: 'bookPrice',
          align: 'center'
        },
        {
          title: '类型',
          key: 'bookType',
          align: 'center'
        },
        {
          title: '借出时间',
          key: 'createTime',
          align: 'center'
        },
        {
          title: '当前状态',
          key: 'endTime',
          align: 'center',
          render: (h, params) => {
            return h('div', [
              h(
                resolveComponent('Button'),
                {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  }
                },
                {
                  default() {
                    return params.row.endTime == null ? '未归还' : '已归还';
                  }
                }
              )
            ]);
          }
        }
      ],
      data: [
        {
          id: '',
          bookId: '',
          personalId: '',
          bookName: '',
          bookAuthor: '',
          bookPrice: '',
          bookType: '',
          createTime: '',
          endTime: ''
        }
      ],
      links: [
        {
          key: '帮助',
          title: '帮助',
          href: 'https://www.iviewui.com',
          blankTarget: true
        },
        {
          key: 'github',
          icon: 'logo-github',
          href: 'https://github.com/view-design/ViewUIPlus',
          blankTarget: true
        },
        {
          key: '条款',
          title: '条款',
          href: '',
          blankTarget: true
        }
      ],
      copyright: 'Copyright © 2022 View Design All Rights Reserved',
      queryForm: {
        name: ''
      },
      ruleInline: {
        name: [{ required: true, message: 'Please fill in the user name', trigger: 'blur' }]
      }
    };
  },
  methods: {
    changePage(page) {
      queryHistoryPage({ name: this.queryForm.name, page: page, size: this.size }).then((res) => {
        this.data = res.date;
        this.total = res.total;
      });
    },
    handleQuery(name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          queryHistoryPage({ name: this.queryForm.name, page: this.page, size: this.size }).then((res) => {
            this.data = res.date;
            this.total = res.total;
          });
        } else {
          this.$Message.error('Fail!');
        }
      });
    }
  },
  created() {
    queryHistoryPage({ name: this.queryForm.name, page: this.page, size: this.size }).then((res) => {
      console.log(res);
      this.data = res.date;
      this.total = res.total;
    });
  }
};
</script>

<style>
.demo-search {
  text-align: center;
}
.demo-add {
  margin-bottom: 20px;
  text-align: center;
}
.demo-form-button {
  text-align: center;
}
</style>
